<template>
  <div id="data-box">
    <div class="data-box-div1">
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="data1"
            label="景区名称">
        </el-table-column>
        <el-table-column
            prop="data2"
            label="地区">
        </el-table-column>
        <el-table-column
            prop="data3"
            label="等级">
        </el-table-column>
        <el-table-column
            prop="data4"
            label="经度">
        </el-table-column>
        <el-table-column
            prop="data5"
            label="维度">
        </el-table-column>
      </el-table>
    </div>
    <div class="data-box-div2">
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[15]"
            :page-size="15"
            layout="total, sizes, prev, pager, next, jumper"
            :total="416">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataManagement',
  mounted() {
    this.getData(0, 15);
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // (curPage-1)*pageSize,pageSize
      let start = (val - 1) * 15;
      let size = 15;
      this.getData(start, size);
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row' + row;
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    getData(start, size) {
      this.$axios.post('/api/vis/data6', {
          "start": start,
          "size": size,

      }).then(res =>{
        if(res.data.code === 20041) {
          let data = [];
          for (let i = 0; i < 15; i++) {
            data.push(
                {
                  data1: res.data.data[i].param,
                  data2: res.data.data[i].param1,
                  data3: res.data.data[i].param2,
                  data4: res.data.data[i].param3,
                  data5: res.data.data[i].param4,
                }
            );
          }
          this.tableData = data;

        }
      }).catch(error =>{
        this.open4(error);
      })
    },
  },
  data() {
    return {
      currentPage4: 1,
      tableData: []
    }
  }
}
</script>

<style scoped>

  #data-box  {
    height: 100%;
    width: 100%;
  }
  #data-box .data-box-div1 {
    width: 90%;
    margin: auto;
    height: 90%;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  #data-box .data-box-div2 {
    width: 50%;
    margin: auto;
    height: 10%;
  }

</style>